{include file='public:header-css'/}
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        {include file='public:left-menu'/}
        <!--End 左侧导航-->
        <!--头部信息-->
        {include file='public:nav-header' title="内容管理" subTitle="添加编辑导航"/}
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content" id="app">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="tab-content" style="padding: 10px 0">
                                <form method="post" id="submit-form" class="edit-form">
                                    <div class="form-info">
                                        <div class="row">
                                            <div class="col-md-6 verify">
                                                <label class="form-title"><em class="require">*</em>导航名称</label>
                                                <input type="text" class="form-control" name="ad_name" value="{$info.ad_name}" placeholder="请输入导航名称"/>
                                                <span class="error" id="err_ad_name"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-info">
                                        <div class="row">
                                            <div class="col-md-6 verify">
                                                <label class="form-title"><em class="require">*</em>跳转类型</label>
                                                <select lay-filter="jump_type" name="jump_type" lay-verify="required" class="form-control">
                                                    <option value="">请选择跳转类型</option>
                                                    <option value="0" {if $info.jump_type== 0}selected{/if}>不跳转</option>
                                                    <option value="1" {if $info.jump_type== 1}selected{/if}>内部页面</option>
                                                    <option value="2" {if $info.jump_type== 2}selected{/if}>H5</option>
                                                    <option value="3" {if $info.jump_type== 3}selected{/if}>外部小程序</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-info">
                                        <div class="row">
                                            <div class="col-md-6 verify">
                                                <label class="form-title"><em class="require">*</em>导航链接</label>
                                                <div class="select-div {if $info.jump_type != 1}layui-hide{/if}">
                                                    <select layui-filter="select_path" name="select_path" value="{$info.ad_link}" class="form-control">
                                                        <option value="">请选择跳转路径</option>
                                                        {volist name="pages" id="vo" }
                                                        <option value="{$key}" {if $info.ad_link== $key}selected{/if}>{$vo}</option>
                                                        {/volist}
                                                    </select>
                                                </div>
                                                <input type="text" class="form-control {if $info.jump_type != 2 && $info.jump_type !=3}layui-hide{/if}" name="ad_link" value="{$info.ad_link}" placeholder="请输入导航链接"/>
                                                <span class="error" id="err_ad_link"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-info">
                                        <div class="row">
                                            <div class="col-md-6 verify">
                                                <label class="form-title"><em class="require">*</em>应用ID</label>
                                                <input type="text" name="app_id" value="{$info.app_id}" placeholder="请输入应用ID" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-info">
                                        <div class="row">
                                            <div class="col-md-6 verify">
                                                <label><em class="require">*</em>导航图片</label>
                                                <div class="upload-row">
                                                    <img class="upload-img" id="image" src="{$info.image|default='__STATIC__/images/upload.png'}">
                                                    <input type="hidden" name="image" value="{$info.image}">
                                                    <input type="hidden" name="image_key" value="{$info.image_key}">
                                                    <div class="input-group-btn">
                                                        <button onclick="GetUploadify(1,'image','ad','call_back')" class="btn btn-default" type="button">上传图片</button>
                                                    </div>
                                                </div>
                                                <span class="error" id="err_image"></span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <h5><em class="require">*</em>是否显示</h5>
                                                <div class="btn-group form-group-toggle">
                                                    <label class="radio-btn radio-theme {if $info.open==1}active{/if}">
                                                        <input type="radio" name="open" value="1" {if $info.open==1}checked{/if}>
                                                        <i class="mdi mdi-checkbox-marked-circle-outline"> 是</i>
                                                    </label>
                                                    <label class="radio-btn radio-default {if $info.open==0}active{/if}">
                                                        <input type="radio" name="open" value="0" {if $info.open==0}checked{/if}>
                                                        <i class="mdi mdi-close-circle-outline"> 否</i> </label>
                                                </div>
                                            </div>
                                            <div class="col-md-6 verify layui-hide">
                                                <label class="form-title"><em class="require">*</em>导航排序</label>
                                                <input type="text" class="form-control" name="sort" value="0" placeholder="请输入导航排序"/>
                                                <span class="error" id="err_sort"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-info">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <input type="hidden" name="{$info.pk}" value="{$info[$info.pk]}">
                                                <button type="button" class="btn-theme submit-btn">确定</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<style>
    .form-info {
        padding: 10px 24px;
    }
</style>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            type: '{$info.type}' || 1,
            ad_type: '{$info.ad_type}' || 1,
        },
        created() {
        },
        methods: {}
    });
    $(function () {
        $('select[name="jump_type"]').on('change', function (data) {
            if ($(this).val() == 2 || $(this).val() == 3) {
                $('.select-div').addClass('layui-hide')
                $('input[name="ad_link"]').removeClass('layui-hide')
            } else {
                $('.select-div').removeClass('layui-hide')
                $('input[name="ad_link"]').addClass('layui-hide')
            }
        });

        $('.submit-btn').click(function () {
            $('span.error').hide();
            $('.verify').removeClass('has-error');
            var url = "{:url('Content/add_home_nav',[$info.pk=>$info[$info.pk]])}";

            const jump_type = $('select[name="jump_type').val()
            const select_path = $('select[name="select_path"]').val()
            try {
                switch (jump_type) {
                    case '1':
                        $('input[name="ad_link"]').val(select_path)
                    case '2':
                        if (!$('input[name="ad_link"]').val()) {
                            throw new Error('请选择路径')
                        }
                        break
                    case '3':
                        if (!$('input[name="ad_link"]').val()) {
                            throw new Error('请选择路径')
                        }
                        if (!$('input[name="app_id"]').val()) {
                            throw new Error('请输入appid')
                        }
                        break
                }
            } catch (e) {
                layer.msg(e.message)
                return false
            }
            var data = $('#submit-form').serialize();
            $.ajax({
                type: "POST",
                url: url,
                data: data,
                dataType: 'json',
                success: function (data) {
                    if (data.code == 1) {
                        showSuccessMsg(data.msg, function () {
                            if (data.data.url) {
                                location.href = data.data.url;
                            }
                        });
                    } else if (data.code == 10) {
                        showErrorMsg(data.msg);
                        $.each(data.data.result, function (index, item) {
                            $('#err_' + index).text(item).show();
                            $('#err_' + index).parent().addClass('has-error');
                        });
                    } else {
                        showErrorMsg(data.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    showErrorMsg("网络失败，请刷新后重试!");
                }
            });
        });
    });

    function call_back(fileurl_tmp, fileurl_id, fileurl_key = '') {
        $("[name=" + fileurl_id + "]").val(fileurl_tmp);
        $("[name=" + fileurl_id + "]").next('input').val(fileurl_key);
        $("#" + fileurl_id).attr('src', fileurl_tmp);
    }
</script>
</body>
</html>
